<template>


<div style="display: flex;">

  <el-tabs type="border-card" style="width: 100%">
    <el-tab-pane label="管理">
      <el-form style="display: flex">
        <div>
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入竟赛名称" suffix-icon="el-icon-search" v-model="contestName"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入项目名称" suffix-icon="el-icon-search" v-model="projectName"></el-input>
          </el-form-item>

        </div>
        <div style="margin-left: 10px">
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入主办单位" suffix-icon="el-icon-search" v-model="organizer"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入获奖级别" suffix-icon="el-icon-search" v-model="priceLevel"></el-input>
          </el-form-item>
        </div>
        <div style="margin-left: 10px">
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入指导教师" suffix-icon="el-icon-search" v-model="teamGuider"></el-input>
           </el-form-item>
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入教师工号" suffix-icon="el-icon-search" v-model="teamGuiderId"></el-input>
          </el-form-item>

        </div>
        <div style="margin-left: 10px">
          <el-form-item >
            <el-input style="width: 200px" placeholder="请输入学生姓名" suffix-icon="el-icon-search" v-model="studentsName"></el-input>
          </el-form-item>
          <el-button class="ml-5" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>


        </div>



      </el-form>
      <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange" >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="contestName" label="竞赛名称" width="140"></el-table-column>

        <el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
        <el-table-column prop="organizer" label="主办单位" width="200"></el-table-column>
        <el-table-column prop="priceLevel" label="获奖级别"></el-table-column>
        <el-table-column prop="teamGuider" label="第一指导老师姓名"></el-table-column>
        <el-table-column prop="teamGuiderId" label="工号"></el-table-column>
        <el-table-column prop="teamLeaderName" label="学生团队负责人姓名"></el-table-column>
        <el-table-column prop="teamLeaderClass" label="班级"></el-table-column>
        <el-table-column prop="otherStudents" label="团队其他成员名单"></el-table-column>
        <!--修改、删除操作-->
        <el-table-column label="操作"  width="120" align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="handleEdit(scope.row)">查看 <i class="el-icon-edit"></i></el-button>
            <br>
            <el-button style="margin-top: 5px" type="warning" @click="download(scope.row)">下载附件</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--页码部分-->
      <!--<div style="padding: 10px 0">-->
      <div style="padding: 10px 0">
        <span class="demonstration"></span>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>


      <el-dialog title="获奖信息" :visible.sync="dialogFormVisible" width="60%" >
        <el-form label-width="80px" size="small" style="display: flex;" disabled>
          <div style="width: 50%" >

            <el-form-item label="竞赛名称">
              <el-input v-model="form.contestName" autocomplete="off"  oninput="value=value.replace(/[^0-9.]/g,'')" ></el-input>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="form.projectName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主办单位">
              <el-input v-model="form.organizer" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="获奖级别">
              <el-input v-model="form.priceLevel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="第一指导老师姓名">
              <el-input v-model="form.teamGuider" autocomplete="off" style="margin-top: 20px"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.teamGuiderPhone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工号" style="margin-left:-30px">
              <el-input v-model="form.teamGuiderId" autocomplete="off" style="width: 92%;margin-left: 30px" ></el-input>
            </el-form-item>
            <el-form-item label="工资发放工行账号">
              <el-input v-model="form.cardNumber" autocomplete="off" style="margin-top: 20px"></el-input>
            </el-form-item>
            <el-form-item label="年份" style="margin-left:-30px">
              <el-input v-model="form.year" autocomplete="off"  style="width: 92%;margin-left: 30px"></el-input>
            </el-form-item>
          </div>

          <div style="width: 50%">
            <el-form-item label="负责人姓名" label-width="100px">
              <el-input v-model="form.teamLeaderName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人学号" label-width="100px">
              <el-input v-model="form.teamLeaderId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" label-width="100px" style="margin-left: -10px">
              <el-input v-model="form.teamLeaderPhone" autocomplete="off" style="width: 97%;margin-left: 10px"></el-input>
            </el-form-item>
            <el-form-item label="班级" label-width="100px" style="margin-left: -30px" >
              <el-input v-model="form.teamLeaderClass" autocomplete="off" style="margin-left:30px;width:92%;"></el-input>
            </el-form-item>
            <el-form-item label="学费扣费工行账号">
              <el-input v-model="form.teamLeaderCardNumber" autocomplete="off" style="margin-top: 20px;width:94%;margin-left: 20px"></el-input>
            </el-form-item>
            <el-form-item label="开户行信息" label-width="100px">
              <el-input v-model="form.bankingDetails" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" label-width="100px">
              <el-input v-model="form.teamLeaderCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学生奖金比例%">
              <el-input v-model="form.studentBonuses" autocomplete="off" style="margin-top: 20px;width:94%;margin-left: 20px"></el-input>
            </el-form-item>
            <el-form-item label="团队其他成员名称" >
              <el-input v-model="form.otherStudents" autocomplete="off"style="margin-top: 3px;width: 94%;margin-left: 20px"></el-input>
            </el-form-item>
          </div>




        </el-form>

      </el-dialog>




    </el-tab-pane>
    <el-tab-pane label="统计分析" >
    <div >
      <div style="display: flex;">

      <div>
        <el-form>
          <el-form-item>
            <el-input style="width: 200px" placeholder="请输入学生名字:" suffix-icon="el-icon-search" v-model="searchSName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 200px" placeholder="请输入学生学号:待开放" suffix-icon="el-icon-search" disabled v-model="searchSCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 200px" placeholder="请输入教师名字:" suffix-icon="el-icon-search" v-model="searchGuider"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 200px" placeholder="请输入教师工号:" suffix-icon="el-icon-search" v-model="searchGuiderId"></el-input>
          </el-form-item>
          <el-button class="ml-5" type="primary" @click="search"><i class="el-icon-search"></i>搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
          <el-button type="success" @click="all">全部</el-button>
          <el-divider></el-divider>
          <el-select :disabled="flag" v-model="CircleY" placeholder="无" @change=" Circlefun" style="margin-bottom: 15px" >
            <el-option
                v-for="item in CircleL"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>



        </el-form>
      </div>

      <div style="margin-left: 100px">
        <el-select v-model="Yearvalue" clearable placeholder="请选择年份" @change="selectYear">
          <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
        <el-table
            :data="statisticsData"
            border
            style="width: 100%">
          <el-table-column
              prop="level"
              label="赛级">
          </el-table-column>
          <el-table-column
              prop="cprice1"
              label="一等奖"
              >
          </el-table-column>
          <el-table-column
              prop="cprice2"
              label="二等奖">
          </el-table-column>
          <el-table-column
              prop="cprice3"
              label="三等奖">
          </el-table-column>
          <el-table-column
              prop="total1"
              label="总计">
          </el-table-column>

        </el-table>
      </div>

      <div style="margin-left: 40px;margin-top: 28px">
        <el-table
            :data="statisticsData2"
            border
            style="width: 100%">
          <el-table-column
              prop="level"
              label="赛级">
          </el-table-column>
          <el-table-column
              prop="cprice4"
              label="金奖">
          </el-table-column>
          <el-table-column
              prop="cprice5"
              label="银奖">
          </el-table-column>
          <el-table-column
              prop="cprice6"
              label="铜奖">
          </el-table-column>
          <el-table-column
              prop="total2"
              label="总计">
          </el-table-column>
        </el-table>
      </div>

      </div>



      </div>
        <div style="border-top: #8c939d 1px solid;margin-top: 5px">
          <div style="display: flex;">
            <div ref="charts1" style="height: 500px;width:50%;margin-top: 20px"></div>
            <div ref="charts2"style="height: 500px;width:50%;margin-top: 20px" ></div>
          </div>

        </div>






    </el-tab-pane>
    <el-tab-pane  disabled label="待开放"></el-tab-pane>
  </el-tabs>





  <el-dialog title="获奖信息" :visible.sync="downloadVisible" width="60%"  >
      <div style=" height: 300px;width: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <el-empty :style="{display:downloadview}" description="暂无数据"></el-empty>
        <div v-for="name in downloadlist"
             :key="name">
          <el-link type="success" @click="Adwonload(name)" >{{name}}</el-link>
        </div>
      </div>

  </el-dialog>


</div>









</template>

<script>
import * as echarts from 'echarts';
export default {

  name: "StatisticsAndManagement",
  data() {

    return {
      //统计图
      chart1:"",
      chart2:"",
      flag :true,
      tempX :[],
      tempdata:[],
      CircleY:'',
      CircleL:["国家级","省级","校级","院级"],
      tempdata2:[],
      CicleData:[],


      //年份
      options: ["全部"],
      Yearvalue: '',
      timeYear: "",


      //统计分析
      searchSName:"",
      searchSCode:"",
      searchGuider:"",
      searchGuiderId:"",
      //返回的奖数

      statisticsData: [],

      statisticsData2:[],

      projectName: "",
      contestName: "",
      organizer: "",
      teamGuiderId: "",
      teamGuider: "",
      priceLevel: "",
        studentsName:"",
      downloadview:'',
      form: {
        id:"",
        contestName:"",
        projectName:"",
        organizer:"",
        priceLevel:"",
        teamGuider:"",
        teamGuiderPhone:"",
        teamGuiderId:"",
        cardNumber:"",
        teamLeaderName:"",
        teamLeaderId:"",
        teamLeaderPhone:"",
        teamLeaderClass:"",
        teamLeaderCode:"",
        teamLeaderCardNumber:"",
        bankingDetails:"",
        studentBonuses:"",
        otherStudents:"",
        year:"",


      },
      tempId:"",
      downloadlist:[],
      downloadVisible:false,
      dialogFormVisible: false,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      multipleSelection: [],



    };
  },
  mounted() {
    this.load()
    // //初始化


  },
  methods: {
    //变换圆形统计图
    Circlefun(){
      const level=this.CircleY;

    switch (level){
      case "全部":{
        this.CicleData=this.tempdata2[4]

        break;
      }
      case "国家级":{
        this.CicleData=this.tempdata2[0]

        break;
      }
      case "省级":{
        this.CicleData=this.tempdata2[1]
        break;
      }
      case "校级":{
        this.CicleData=this.tempdata2[2]
        break;
      }
      case "院级":{
        this.CicleData=this.tempdata2[3]
        break;
      }
      default:{
        this.$message.error("暂无信息或请正确操作!")
        break;
      }

    }
      if (this.chart1) {
        this.chart1.dispose();
      }
      if (this.chart2) {
        this.chart2.dispose();
      }


      this.toCharts()
    },
    toCharts(){
      this.chart1 = echarts.init(this.$refs.charts1)
      this.chart2 = echarts.init(this.$refs.charts2)
      const option ={
        legend: {
          orient: 'horizontal',
          bottom: 10,
          left: 'center',
          data: [

            {
              name: '一等奖',
              icon: 'rect'
            },
            {
              name: '二等奖',
              icon: 'rect'
            },
            {
              name: '三等奖',
              icon: 'rect'
            },
            {
              name: '金奖',
              icon: 'rect'
            },
            {
              name: '银奖',
              icon: 'rect'
            },
            {
              name: '铜奖',
              icon: 'rect'
            },
          ]
        },
          color:[
            '#3399FF',
            '#00CC66',
            '#FFFF00',
            '#d48265',
            '#91c7ae',
            '#CC99FF',
          ],
        title:{
          text: this.Yearvalue+"年度获奖总计"
        },
        xAxis:{
          data:this.tempX,
          axisLabel: {
            interval: 0, // 强制显示所有标签// 旋转角度，使标签适应
            width: 30   // 设置标签宽度
          }
        },

        yAxis:{

        },

        dataZoom: [
          // ...
        ],
        tooltip:{

        },
        series:[{
          name:"一等奖",
          type:"bar",
          data:this.tempdata[0]
        },
          {
            name:"二等奖",
            type:"bar",
            data:this.tempdata[1]
          },
          {
            name:"三等奖",
            type:"bar",
            data:this.tempdata[2]
          },
          {
            name:"金奖",
            type:"bar",
            data:this.tempdata[3]
          },
          {
            name:"银奖",
            type:"bar",
            data:this.tempdata[4]
          },
          {
            name:"铜奖",
            type:"bar",
            data:this.tempdata[5]
          }
        ]

      }
      const option2 = {
        tooltip:{

        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.CicleData.cprice1,
                name: '一等奖'
              },
              {
                value: this.CicleData.cprice2,
                name: '二等奖'
              },
              {
                value: this.CicleData.cprice3,
                name: '三等奖'
              },
              {
                value: this.CicleData.cprice4,
                name: '金奖'
              },
              {
                value: this.CicleData.cprice5,
                name: '银奖'
              },
              {
                value: this.CicleData.cprice6,
                name: '铜奖'
              }
            ]
          }
        ],

      }
      this.chart2.setOption(option2)
      this.chart1.setOption(option)
    },
    selectYear(){
      console.log(this.Yearvalue)
    },

    search(){
      if (this.searchSName!==""||this.searchGuider!==""||this.searchGuiderId!==""){
        this.request.get("/admin/searchTotal",{params:{searchSName:this.searchSName,
            searchSCode:this.searchSCode,
            searchGuider:this.searchGuider,
            searchGuiderId:this.searchGuiderId,
            searchYear:this.Yearvalue,
          }})
            .then(res=>{
              console.log(res.msg)
              if (res.msg !=="0"){
                this.$message.warning("您有"+res.msg+"个是未知数据,请去手动修改获奖级别!否则会影响数据结果")

              }

              console.log(res)
              const temp = res.data
              this.tempdata2=res.data
              this.statisticsData2 = temp.map(row => {
                const total2 = row.cprice4 + row.cprice5 + row.cprice6;
                return { ...row, total2 };
              });
              this.statisticsData = temp.map(row => {
                const total1 = row.cprice1 + row.cprice2 + row.cprice3;
                return { ...row, total1 };
              });
              console.log( this.statisticsData2)
              console.log( this.statisticsData)
              //筛选
              this.tempX=temp.filter(item => item.level!=="总计")
              .map(item => item.level)
              this.tempdata = []
              this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice1))
              this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice2))
              this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice3))
              this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice4))
              this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice5))
              this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice6))
              console.log(this.tempdata)
              this.CircleY = "国家级"
              this.Circlefun();
              this.flag = false;


            }).catch((error)=>{
          this.$message.error("系统错误")
        })
      }


    },



    download(row){
      this.downloadVisible = true

      this.tempId = row.id;
      const id =this.tempId
      this.request.get("/admin/findDonwload",{params:{AwardId:id}}).then(res=>{
            console.log(res)
        this.downloadlist=res

        if ((this.downloadlist).length !==0 ){
              this.downloadview = 'none';
        }else {
          this.downloadview = '';
        }
      })
    },

    Adwonload(name){
      console.log(name)
      const token = localStorage.getItem('user');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `http://localhost:9090/admin/download?AwardId=${this.tempId}`);
      xhr.setRequestHeader('Authorization', token);
      xhr.responseType = 'blob';
      xhr.onload = function() {
        const url = window.URL.createObjectURL(xhr.response);
        const a = document.createElement('a');
        a.href = url;
        a.download = name;
        a.click();
        window.URL.revokeObjectURL(url);
      };
      xhr.send();



    },

    load() {
      this.options = ["全部"];
      const timeyear = new Date().getFullYear();
      for (let i = 0; i < 4; i++) {
        this.options.push(timeyear - i);
      }



      this.request.get("/admin/awardInfo/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ContestName: this.contestName,
          TeamGuiderId: this.teamGuiderId,
          ProjectName:this.projectName,
          TeamGuider:this.teamGuider,
          PriceLevel:this.priceLevel,
          StudentsName:this.studentsName,
          Year:this.contestyear,
          Organizer:this.organizer
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total

      })




    },
    all(){

      this.request.get("/admin/searchTotal",{params:{searchSName:"",
              searchSCode:"",
              searchGuider:"",
              searchGuiderId:"",
              searchYear:"",
            }}).then(res=>{
        if (res.msg !=="0"){
          this.$message.warning("您有"+res.msg+"个是未知数据,请去手动修改获奖级别!否则会影响数据结果")
        }
        console.log(res)
        const temp = res.data
        this.tempdata2=res.data
        this.statisticsData2 = temp.map(row => {
          const total2 = row.cprice4 + row.cprice5 + row.cprice6;
          return { ...row, total2 };
        });
        this.statisticsData = temp.map(row => {
          const total1 = row.cprice1 + row.cprice2 + row.cprice3;
          return { ...row, total1 };
        });
        console.log( this.statisticsData2)
        console.log( this.statisticsData)
        //筛选
        this.tempX=temp.filter(item => item.level!=="总计")
            .map(item => item.level)
        this.tempdata = []
        this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice1))
        this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice2))
        this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice3))
        this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice4))
        this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice5))
        this.tempdata.push(temp.filter(item => item.level!=="总计").map(item => item.cprice6))
        console.log(this.tempdata)
        this.CircleY = "全部"
        this.Circlefun();
        this.flag = false;


      }).catch((error)=>{
        this.$message.error("系统错误")
      })
    },


    reset() {
      this.studentsName = ""
     this.projectName=""
     this.organizer = ""
     this.priceLevel = ""
     this.teamGuider = ""
     this.teamGuiderId = ""
      this.contestName = ""
       this.searchSName= ""
       this.searchGuider= ""
       this.searchGuiderId= ""
       this.searchSCode= ""
      if (this.chart1 && typeof this.chart1.clear === 'function') {
        this.chart1.clear();}
      this.statisticsData = [];
      this.statisticsData2 = [];
      this.CicleData = [];
      this.tempdata = [];
      this.tempdata2 = "";
      this.Yearvalue = "";
      if (this.chart2 && typeof this.chart2.clear === 'function') {
        this.chart2.clear();}
      this.flag = true;
      this.load()

    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val

    },
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true



    },

    handleSizeChange(pageSize) {


      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()



    },








  }
}
</script>

<style scoped>

      .students{

        width: 20%;
        height: 50%;
        border-radius: 10px;
        display: flex;
      }
      .titleSelect{
        background:#6d9eeb;
        width: 50%;
        height: 30%;
        border-radius: 10px;
        margin-left: 200px;
      }
      .Bton{
        border: #42b983;

        background-color: #42b983; /* 背景颜色 */
        color: red; /* 文本颜色 */
        border-radius: 5px; /* 圆角 */
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 边框阴影 */
        width: 150px;
        height: 50px;
      }
      button:hover {
        background-color: #2980b9; /* 悬停状态背景颜色 */
      }
      .left{

        width: 70%;
        height: 80%;
        background: #fa0000;

      }
      .right{
        width: 30%;
        height: 80%;
        background: #e24242;
      }


</style>